<!--
 * @Author: your name
 * @Date: 2021-08-26 13:57:50
 * @LastEditTime: 2021-08-26 14:41:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /web-blog/src/pages/dashboard/blog/openSubject.vue
-->
<template>
  <div>
    <a-card>
      <div class="headeBox">
        <a-input-search placeholder="请输入开源项目名称" 
                        enter-button
                        class="search"
                        @search="onSearch" />
        <a-button type="primary"
                  @click="showModal"
                  icon="plus"
                  class="addBtn">添加</a-button>
        <!-- 添加开源项目弹框 -->
        <a-modal
          title="添加开源项目"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="sumbitAdd"
          @cancel="handleCancel">
          <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
            <a-form-item label="项目名称">
              <a-input v-decorator="['项目名称', { rules: [{ required: true, message: '请输入项目名称' }] }]"/>
            </a-form-item>
            <a-form-item label="项目简介">
              <a-input v-decorator="['项目简介', { rules: [{ required: true, message: '请输入项目简介' }] }]"/>
            </a-form-item>
            <a-form-item label="项目链接">
              <a-input v-decorator="['项目链接', { rules: [{ required: true, message: '请输入项目链接' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接1">
              <a-input v-decorator="['图标链接1', { rules: [{ required: true, message: '请输入图标链接1' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接2">
              <a-input v-decorator="['图标链接2', { rules: [{ required: true, message: '请输入图标链接2' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接3">
              <a-input v-decorator="['图标链接3', { rules: [{ required: true, message: '请输入图标链接3' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接4">
              <a-input v-decorator="['图标链接4', { rules: [{ required: true, message: '请输入图标链接4' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接5">
              <a-input v-decorator="['图标链接5', { rules: [{ required: true, message: '请输入图标链接5' }] }]"/>
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
      <a-table :columns="columns" 
               :data-source="data" 
               :scroll="{ x: 1500, y: 300 }"
               bordered>
        <a-button type="primary" 
                  slot="action" 
                  icon="edit"
                  @click="editLable"
                  class="edit">编辑</a-button>
        <a-button type="danger" 
                  slot="action" 
                  @click="handleDelete"
                  icon="delete">删除</a-button>
      </a-table>

      <!-- 编辑开源项目 -->
      <a-modal
          title="编辑开源项目"
          :visible="editVisible"
          :confirm-loading="editConfirmLoading"
          @ok="sumbitEdit"
          @cancel="editCancel">
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
            <a-form-item label="项目名称">
              <a-input v-decorator="['项目名称', { rules: [{ required: true, message: '请输入项目名称' }] }]"/>
            </a-form-item>
            <a-form-item label="项目简介">
              <a-input v-decorator="['项目简介', { rules: [{ required: true, message: '请输入项目简介' }] }]"/>
            </a-form-item>
            <a-form-item label="项目链接">
              <a-input v-decorator="['项目链接', { rules: [{ required: true, message: '请输入项目链接' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接1">
              <a-input v-decorator="['图标链接1', { rules: [{ required: true, message: '请输入图标链接1' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接2">
              <a-input v-decorator="['图标链接2', { rules: [{ required: true, message: '请输入图标链接2' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接3">
              <a-input v-decorator="['图标链接3', { rules: [{ required: true, message: '请输入图标链接3' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接4">
              <a-input v-decorator="['图标链接4', { rules: [{ required: true, message: '请输入图标链接4' }] }]"/>
            </a-form-item>
            <a-form-item label="图标链接5">
              <a-input v-decorator="['图标链接5', { rules: [{ required: true, message: '请输入图标链接5' }] }]"/>
            </a-form-item>
        </a-form>
        </a-modal>
    </a-card>
  </div>
</template>
<script>
const columns = [
  { title: 'id', width: 80, dataIndex: 'id', key: 'name', fixed: 'left' },
  { title: '项目名称', width: 200, dataIndex: 'projectName', key: 'age', fixed: 'left' },
  { title: '项目简介', dataIndex: 'projectDescription', key: '1', width: 300 },
  { title: '项目链接', dataIndex: 'projectLink', key: '2', width: 300 },
  { title: '图标链接1', dataIndex: 'icon1', key: '3', width: 300 },
  { title: '图标链接2', dataIndex: 'icon2', key: '4', width: 300 },
  { title: '图标链接3', dataIndex: 'icon3', key: '5', width: 300 },
  { title: '图标链接4', dataIndex: 'icon4', key: '6', width: 300 },
  { title: '图标链接5', dataIndex: 'icon5', key: '7', width: 300 },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 210,
    scopedSlots: { customRender: 'action' },

  },
];

const data = [
  {
    key: '1',
    id: '1',
    projectName: 'web-blog',
    projectDescription: "基于vue的开源项目",
    projectLink: "https://gitee.com/woaink/wx-blog",
    icon1: "https://travis-ci.org/a407042815/web-blog.svg?branch=master",
    icon2: "https://img.shields.io/npm/v/web-blog.svg",
    icon3: "http://img.shields.io/npm/dm/web-blog.svg",
    icon4: "https://img.shields.io/github/license/elemefe/vue-amap.svg?style=flat-square",
    icon5: "https://gitee.com/woaink/web-blog/badge/star.svg?theme=white"
  }
];

export default {
  data() {
    return {
      data,
      columns,
      visible: false,
      editVisible: false,
      confirmLoading: false,
      editConfirmLoading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
    /**
     * 控制添加对话框的显示与隐藏
     */
    showModal() {
      this.visible = true;
    },

    /**
     * 分类标签确定事件
     */
    sumbitAdd(e) {
      this.confirmLoading = true;
      console.log(e);
      this.visible = false;
      this.confirmLoading = false;
      this.$message.success('发布开源项目成功');
    },

    /**
     * 添加分类弹框取消事件
     */
    handleCancel(e) {
      console.log('Clicked cancel button', e);
      this.visible = false;
    },

    editLable() {
      this.editVisible = true;
    },

    /**
     * 添加分类弹框取消事件
     */
    editCancel(e) {
      console.log('Clicked cancel button', e);
      this.editVisible = false;
    },

    /**
     * 编辑标签确定事件
     */
    sumbitEdit(e) {
      this.editConfirmLoading = true;
      console.log(e);
      this.editVisible = false;
      this.editConfirmLoading = false;
      this.$message.success('编辑开源项目成功');
    },

    /**
     * 删除开源项目
     */
    handleDelete() {
      this.$message.success('删除开源项目成功');
    },

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },

    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
      });
    },
  }
};
</script>

<style lang="less" scoped>

.headeBox {
  margin-bottom: 20px;
}
.search {
  width: 200px;
  margin-right: 10px;
}
.edit {
  margin-right: 10px;
}

</style>